import React, { Component } from 'react';
import styled from 'styled-components/native';
import { connect } from 'react-redux';
import { ScrollView } from 'react-native';
import {
  FontAwesome,
  Ionicons,
  Entypo,
  Foundation,
  MaterialIcons
} from '@expo/vector-icons';

import { colors, strings } from '../utils/constants';
import { ToolbarButton } from '../components/common';
import ProfileCard from '../components/profile/ProfileCard';
import SettingFullButton from '../components/profile/SettingFullButton';

const Root = styled.View`
  backgroundColor: ${colors.BACKGROUND};
`;

const Section = styled.View`
  width: 100%;
  marginTop: 10;
  marginBottom: ${props => props.isLast ? 10 : 0};
`;

class ProfileScreen extends Component {

  static navigationOptions = ({ navigation }) => {
    const headerLeft = (
      <ToolbarButton
        text="添加好友"
        onPressed={() => {
          console.log(`显示添加好友的界面`);
        }}
      />
    );
    const headerRight = (
      <ToolbarButton
        text="设置"
        onPressed={() => {
          console.log(`打开设置界面`);
        }}
      />
    );
    return {headerLeft, headerRight};
  }

  render() {
    return (
      <Root>
        <ScrollView>
          <ProfileCard
            nickname={this.props.user.info && this.props.user.info.username}
            avatar={this.props.user.info && this.props.user.info.avatar}
          />
          <Section>
            <SettingFullButton
              title={strings.SETTINGS_HONG_BAO}
              description={strings.SETTINGS_HONG_BAO_DES}
              isShowArrow
              icon={<FontAwesome size={22} color={colors.WHITE} name="calendar-check-o" />}
              backgroundColor="#f26d64"
            />
            <SettingFullButton
              title={strings.SETTINGS_NEW_FRIEND}
              isShowBottomDivider
              newMsgCount={42}
              backgroundColor="#ff9e00"
              icon={<Ionicons size={22} color={colors.WHITE} name="md-people" />}
            />
          </Section>
          <Section>
            <SettingFullButton
              title={strings.SETTINGS_MY_ALBUM}
              isShowArrow
              icon={<Entypo size={22} color={colors.WHITE} name="image-inverted" />}
              backgroundColor="#2dbb7f"
            />
            <SettingFullButton
              title={strings.SETTINGS_FAVOURITE_COUNT}
              description={strings.SETTINGS_FAVOURITE_COUNT_DES}
              isShowBottomDivider
              isShowArrow
              backgroundColor="#f36e5f"
              icon={<Foundation size={26} color={colors.WHITE} name="like" />}
            />
          </Section>
          <Section>
            <SettingFullButton
              title={strings.SETTINGS_WEIBO_WALLET}
              description={strings.SETTINGS_WEIBO_WALLET_DES}
              isShowNewDot
              icon={<Entypo size={22} color={colors.WHITE} name="wallet" />}
              backgroundColor="#f36e5f"
            />
            <SettingFullButton
              title={strings.SETTINGS_WEIBO_SPORTS}
              description={strings.SETTINGS_WEIBO_SPORTS_DES}
              isShowArrow
              icon={<MaterialIcons size={26} color={colors.WHITE} name="directions-run" />}
              backgroundColor="#f36e5f"
            />
            <SettingFullButton
              title={strings.SETTINGS_FREE_DATA}
              description={strings.SETTINGS_FREE_DATA_DES}
              isShowBottomDivider
              isShowArrow
              backgroundColor="#ff9d00"
              icon={<MaterialIcons size={22} color={colors.WHITE} name="sim-card" />}
            />
          </Section>
          <Section>
            <SettingFullButton
              title={strings.SETTINGS_FOLLOWER_SERVICE}
              description={strings.SETTINGS_FOLLOWER_SERVICE_DES}
              isShowArrow
              icon={<FontAwesome size={22} color={colors.WHITE} name="user" />}
              backgroundColor="#5c98ee"
            />
            <SettingFullButton
              title={strings.SETTINGS_FOLLOWER_TOP_LINE}
              description={strings.SETTINGS_FOLLOWER_TOP_LINE_DES}
              isShowBottomDivider
              isShowArrow
              backgroundColor="#ff9d00"
              icon={<Entypo size={22} color={colors.WHITE} name="light-bulb" />}
            />
          </Section>
          <Section>
            <SettingFullButton
              title={strings.SETTINGS_CUSTOM_SERVICE}
              isShowBottomDivider
              isShowArrow
              backgroundColor="#5c98ee"
              icon={<MaterialIcons size={24} color={colors.WHITE} name="headset" />}
            />
          </Section>
          <Section isLast>
            <SettingFullButton
              title={strings.SETTINGS_DRIFT_BOX}
              isShowBottomDivider
              isShowArrow
              backgroundColor="#5c98ee"
              icon={<MaterialIcons size={24} color={colors.WHITE} name="drafts" />}
            />
          </Section>
        </ScrollView>
      </Root>
    );
  }
}

const mapStateToProps = state => ({
  user: state.user
});

export default connect(mapStateToProps, null)(ProfileScreen);
